<template>
  <tn-popup 
    v-model="popupVisible"
    length="50%" 
    :mode="mode"
    :backgroundColor="backgroundColor" 
    :width="width" 
    :height="height" 
    :borderRadius="23"
    :closeBtn="closeBtn" 
    :closeBtnIcon="closeBtnIcon" 
    :closeBtnPosition="closeBtnPosition"
    :maskCloseable="maskCloseable" 
    @close="closedPopup">
    <view class="popup-content" :class="{ 'popup-content--bottom': mode === 'bottom' }">
      <view class="popup-inner">
        <!-- 标题部分 -->
        <view class="popup-title">
          <text class="t-icon" :class="titleIcon"></text>{{ title }}
        </view>

        <!-- 时间选择 -->
        <view class="form-item">
          <text class="label">选择时间</text>
          <timePicker mode="time" :defaultTime="currentTime"></timePicker>
        </view>

        <!-- 数量选择 -->
        <view v-if="showNumberBox" class="form-item" style="border-radius: 10rpx; margin: 20rpx 0;">
          <text class="label">{{ numberBoxLabel }}</text>
          <view style="margin: 10rpx 0;">
            <tn-number-box v-model="currentValue" :min="10" :max="500" :step="20"
              backgroundColor="tn-main-gradient-orangeyellow"></tn-number-box>
            <text style="margin-left: 10rpx;">{{ unit }}</text>
          </view>
        </view>

        <!-- 备注 -->
        <view class="form-item" style="border-radius: 10rpx; margin: 20rpx 0; flex: 1;" id="remarkInput">
          <text class="label">备注</text>
          <view style="margin: 10rpx 0; background-color: #f8f8f8; border-radius: 8rpx;">
            <tn-input v-model="currentRemark" type="text" placeholder="请输入备注信息" inputAlign="left"
              @focus="scrollToInput('remarkInput')"></tn-input>
          </view>
        </view>

        <!-- 保存按钮 -->
        <view class="button-container" style="margin-top: auto;">
          <tn-button @click="handleSave" size="md" width="100%"
            backgroundColor="tn-main-gradient-orangeyellow" fontColor="#ffffff">
            {{ isEdit ? '保存修改' : '保存' }}
          </tn-button>
        </view>
      </view>
    </view>
  </tn-popup>
</template>

<script>
import timePicker from '@/libs/components/time.vue'
export default {
  name: 'record-popup',
  components: { timePicker },
  props: {
    show: {
      type: Boolean,
      default: false
    },
    type: {
      type: Number,
      default: 0
    },
    editData: {
      type: Object,
      default: null
    },
    mode: {
      type: String,
      default: 'bottom'
    },
    backgroundColor: {
      type: String,
      default: '#ffffff'
    },
    width: String,
    height: String,
    borderRadius: {
      type: Number,
      default: 0
    },
    closeBtn: {
      type: Boolean,
      default: true
    },
    closeBtnIcon: String,
    closeBtnPosition: String,
    maskCloseable: {
      type: Boolean,
      default: true
    }
  },
  emits: ['update:show', 'close', 'save'],
  data() {
    return {
      currentTime: '',
      currentValue: 20,
      currentRemark: '',
    }
  },
  computed: {
    popupVisible: {
      get() {
        return this.show
      },
      set(value) {
        this.$emit('update:show', value)
      }
    },
    isEdit() {
      return !!this.editData
    },
    titleIcon() {
      const icons = {
        0: 't-icon-naiping',
        1: 't-icon-ertongfushi',
        2: 't-icon-yingerzhiniaoku'
      }
      return icons[this.type] || ''
    },
    title() {
      const titles = {
        0: '喂奶',
        1: '辅食',
        2: '尿不湿'
      }
      return (this.isEdit ? '修改' : '') + (titles[this.type] || '')
    },
    showNumberBox() {
      return this.type !== 2
    },
    numberBoxLabel() {
      return this.type === 0 ? '奶量' : '食量'
    },
    unit() {
      return this.type === 0 ? 'ml' : 'g'
    },
    formattedBorderRadius() {
      return typeof this.borderRadius === 'number' 
        ? `${this.borderRadius}rpx` 
        : this.borderRadius
    }
  },
  watch: {
    popupVisible: {
      handler(newVal) {
        if (newVal && this.editData) {
          this.currentTime = this.editData.createTime
          this.currentValue = this.editData.quantity || 100
          this.currentRemark = this.editData.remark || ''
        } else {
         this.resetForm()
        }
      }
    }
  },
  methods: {
    formatTime(dateTimeString) {
      if (!dateTimeString) return ''
      const date = new Date(dateTimeString.replace(/-/g, '/'))
      const hours = date.getHours().toString().padStart(2, '0')
      const minutes = date.getMinutes().toString().padStart(2, '0')
      return `${hours}:${minutes}`
    },
    resetForm() {
      this.currentTime = ''
      this.currentValue = 100
      this.currentRemark = ''
    },
    closedPopup() {
      this.$emit('update:show', false)
      this.$emit('close')
      this.resetForm()
    },
    scrollToInput(id) {
      // 处理输入框滚动
    },
    handleSave() {
      const data = {
        id: this.editData?.id,
        type: this.type,
        time: this.currentTime,
        value: this.currentValue,
        remark: this.currentRemark
      }
      this.$emit('save', data)
      this.closedPopup()
    }
  }
}
</script>

<style lang="scss" scoped>

.popup-content {
	display: flex;
	flex-direction: column;
	height: 100%;
	background-color: #fff;
	border-radius: 24rpx 24rpx 0 0;
	position: relative;
	
	&::before {
		content: '';
		position: absolute;
		top: 16rpx;
		left: 50%;
		transform: translateX(-50%);
		width: 60rpx;
		height: 6rpx;
		background: #e0e0e0;
		border-radius: 4rpx;
	}
}

.popup-inner {
	flex: 1;
	display: flex;
	flex-direction: column;
	padding: 0 30rpx 30rpx;
}

.popup-title {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 40rpx 30rpx 24rpx;
	margin-bottom: 20rpx;
	position: relative;
	
	&::after {
		content: '';
		position: absolute;
		bottom: 0;
		left: 30rpx;
		right: 30rpx;
		height: 1px;
		background: linear-gradient(to right, transparent, #f0f0f0, transparent);
	}
	
	.t-icon {
		font-size: 36rpx;
		color: #FF9800;
		margin-right: 12rpx;
		display: flex;
		align-items: center;
	}
	
	text {
		font-size: 30rpx;
		color: #2c2c2c;
		font-weight: 500;
		letter-spacing: 1rpx;
	}
}

.form-item {
	margin-bottom: 24rpx;
	
	.label {
		font-size: 28rpx;
		color: #666;
		margin-bottom: 12rpx;
		font-weight: 500;
	}
}

.button-container {
	margin-top: 40rpx;
	padding: 0 20rpx;
}

</style> 